<template>
    <div class="index">
        <el-container>
            <el-header>
                <TopMenu @getTelescoping="getTelescoping" />
            </el-header>
            <el-container>
                <el-aside ref="leftMenuAside" width="200px" class="leftMenuAside"><LeftMenu :Collapse="Collapse" /></el-aside>
                <el-main ref="mainContent" id="mainContent">
                    <HeaderTabs></HeaderTabs>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
        <ChatRoom v-if="user.Identify!='3'"></ChatRoom>
    </div>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
import TopMenu from '@/components/page/menu/top.vue'
import { useStore } from 'vuex' 
import LeftMenu from '@/components/page/menu/left.vue'
import ChatRoom from '@/components/page/DetailPage/assist/ChatRoom.vue'
import HeaderTabs from '@/components/page/component/HeaderTabs.vue'
export default defineComponent({
    components:{
        TopMenu,LeftMenu,ChatRoom,HeaderTabs
    },
    data(){
        return{
            Collapse:true,
            user:null
        }
    },   
    setup() {
        // vuex的数据对象
        const store = useStore();
        return{
            store
        } 
    },
    created () {
        this.user = this.store.state.UserMessage;
    },
    methods:{
        getTelescoping(msg){
            this.Collapse = msg;
            if(msg){
                document.getElementById("mainContent").style.width='';
                this.$refs['leftMenuAside'].$el.style.width='64px !important'
            }else{
                document.getElementById("mainContent").style.width='1470px'
                this.$refs['leftMenuAside'].$el.style.width='64px !important'
            }
        }
    }
})
</script>
<style scoped>
    .el-header{
        border-bottom-right-radius: 36px;
        overflow: hidden;
    }
    .el-main{
        height: calc(100% - 65px);
        width: calc(100% - 219px);
        position: absolute;
        right: 12px;
        bottom: 6px;
        border-top-right-radius: 25px;
        border-top-right-radius: 20px;
        border-bottom-left-radius: 50px;
        background-color: white;
        box-shadow: 4px -1px 7px 0px #6f6f6f;
    }
    #mainContent{
        transition: all .5s;
    }
    .el-header{
        padding: 0;
    }
    .index{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }
</style>